// static/user/js/modules/equipment-details.js
class EquipmentDetails {
    static async show(itemId) {
        try {
            MaskLayer.show();
            const drawer = document.getElementById('equipmentDetailsDrawer');
            const content = drawer.querySelector('.details-drawer__content');

            content.innerHTML = '<div class="loading-spinner"></div>';

            const data = await fetchData(API.ITEM.ITEM_DETAILS, Number(itemId));

            content.innerHTML = `
        ${data.maintenanceStatus === 1 ? '<div class="status-badge">维护中</div>' : ''}
        <img class="equipment-details__image" 
             src="${data.imgUrl || '/static/default-image.jpg'}" 
             alt="${data.name}"
             onerror="this.src='/static/default-image.jpg'">
        
        <h2 class="equipment-details__title">${data.name}</h2>
        <p class="equipment-details__category">分类：${data.categoryName}</p>
        
        <div class="equipment-details__specs">
          <i class="icon-info"></i> 规格：${data.specs}
        </div>

        <div class="equipment-details__finance">
          <div class="finance-item">
            <div class="finance-item__label">日租金</div>
            <div class="finance-item__value">¥${data.dailyRate}</div>
          </div>
          <div class="finance-item">
            <div class="finance-item__label">押金</div>
            <div class="finance-item__value">¥${data.deposit}</div>
          </div>
        </div>

        <div class="equipment-details__stock">
          <div class="stock-item">
            <div class="finance-item__label">总库存</div>
            <div class="stock-item__value">${data.totalStock}</div>
          </div>
          <div class="stock-item">
            <div class="finance-item__label">可租数量</div>
            <div class="stock-item__value ${data.availableStock === 0 ? 'stock-item__value--warning' : ''}">
              ${data.availableStock}
            </div>
          </div>
        </div>

        ${data.description ? `
        <div class="equipment-details__section">
          <h3 class="equipment-details__section-title">器材说明</h3>
          <p>注：所有器材默认七日内归还，请租户关注时间，超期时间双倍日租金</p>
        </div>` : ''}
      `;

            drawer.classList.add('details-drawer--active');
            this.bindCloseEvents();
        } catch (error) {
            Alert.show('详情加载失败: ' + error.message, 'error');
            MaskLayer.hide();
        }
    }

    static bindCloseEvents() {
        const drawer = document.getElementById('equipmentDetailsDrawer');
        const mask = document.getElementById('globalMaskLayer');
        const closeBtn = drawer.querySelector('.details-drawer__close-btn');

        const closeHandler = () => {
            drawer.classList.remove('details-drawer--active');
            MaskLayer.hide();
            // 移除事件监听
            mask.removeEventListener('click', closeHandler);
            closeBtn.removeEventListener('click', closeHandler);
        };

        mask.addEventListener('click', closeHandler);
        closeBtn.addEventListener('click', closeHandler);
    }
}